<template>
	<view class="app">
		<!-- 页面内容开始 -->
		<u-form :model="form1" ref="form1" :label-width="200" input-align="right">
			<u-form-item label="收货人" prop="name">
				<u-input v-model="form1.name" placeholder="请输入收货人姓名" :clearable="false" />
			</u-form-item>
			<u-form-item label="手机号码" prop="mobile">
				<u-input v-model="form1.mobile" placeholder="请输入收货人手机号" :clearable="false" />
			</u-form-item>
			<u-form-item label="所在地区" prop="position.area.code">
				<vk-data-input-address ref="address" v-model="form1.position" confirm-color="var(--main)"></vk-data-input-address>
			</u-form-item>
			<!-- <u-form-item label="地图位置" prop="position.latitude">
				<vk-data-input-map v-model="form1.position" placeholder="请选择地图"/>
			</u-form-item> -->
			<u-form-item label="详细地址" prop="position.address">
				<u-input v-model="form1.position.address" placeholder="街道、楼牌等" />
			</u-form-item>
			<u-form-item label="选择标签">
				<vk-data-input-radio
					v-model="form1.alias"
					:localdata="[
						{ value: '', label: '无' },
						{ value: '家', label: '家' },
						{ value: '公司', label: '公司' },
						{ value: '朋友', label: '朋友' },
						{ value: '客户', label: '客户' },
						{ value: '学校', label: '学校' },
						{ value: '其他', label: '其他' }
					]"
					active-color="var(--main)"
				></vk-data-input-radio>
			</u-form-item>
			<u-form-item label="设为默认地址" align="right">
				<u-switch v-model="form1.is_default" active-color="var(--main)"></u-switch>
			</u-form-item>

			<view class="footer">
				<view class="btn-box">
					<view class="secondary-btn" @click="secondaryBtn" v-if="mode == 'add'">智能识别收货信息</view>
					<view class="main-btn" @click="submit">保存</view>
				</view>
			</view>
		</u-form>

		<u-modal ref="uModal" v-model="addressPopup.show" title="智能识别收货信息" @confirm="discernAddress"
			:async-close="true" :mask-close-able="true" negative-top="450">
			<view style="padding: 30rpx;height: 200rpx;width: 100%;">
				<u-input v-if="addressPopup.show" v-model="addressPopup.value" type="textarea"  height="140" :clearable="true"
					placeholder="请在此粘贴地址信息，姓名 手机号 地址格式(无顺序要求)，如 张三 13888888888 浙江省杭州市西湖区xxx小区xxx楼" />
			</view>
		</u-modal>

		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<vk-data-loading v-model="loading" :delayTime="0"></vk-data-loading>
	</view>
</template>

<script>
var vk = uni.vk; // vk依赖

export default {
	data() {
		// 页面数据变量
		return {
			title: "收货地址",
			url: {
				add: "client/address.addUpdate", // 添加时请求的云函数
				update: "client/address.addUpdate", // 修改时请求的云函数
				getInfo: "client/address.getInfo", // 修改时，查询_id对应的信息时请求的云函数
			},
			// 表单请求数据
			form1: {
				name: "",
				mobile: "",
				position: {},
				alias: "",
				is_default: true,
			},
			rules: {
				name: [
					{ required: true, type: "string", message: "请输入姓名", trigger: ["change", "blur"] }
				],
				mobile: [
					{ required: true, type: "string", message: "请输入手机号", trigger: ["change", "blur"] },
					{ validator: uni.vk.pubfn.validator("mobile"),message: "手机号格式错误",trigger: "blur" }
				],
				"position.area.code": [
					{ required: true, type: "string", message: "请选择所在地区", trigger: ["change", "blur"] }
				],
				"position.latitude": [
					{ required: true, type: "number", message: "请选择地图位置", trigger: ["change", "blur"] }
				],
				"position.address": [
					{ required: true, type: "string", message: "请输入详情地址", trigger: ["change", "blur"] }
				]
			},
			scrollTop: 0,
			loading: false, // 表单是否在请求中
			mode: "", // add update
			addressPopup: {
				show: false,
				value: ""
			}
		};
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options) {
		vk = uni.vk;
		this.options = options;
		this.init(options);
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		let that = this;
		that.originalForm = vk.pubfn.copyObject(that.form1);
		that.$refs.form1.setRules(that.rules);
	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
			let that = this;
			that.mode = options._id ? "update" : "add";
			uni.setNavigationBarTitle({
				title: that.mode == "update" ? `修改${that.title}` : `新增${that.title}`
			});
			const eventChannel = that.getOpenerEventChannel(); // that 需指向 this
			if (eventChannel.on) {
				// 监听data事件，获取上一页面通过eventChannel.emit传送到当前页面的数据
				eventChannel.on("data", data => {
					that.form1 = vk.pubfn.objectAssign(that.form1, data);
				});
			}
			if (that.mode == "update") {
				// 如果没有通过eventChannel.on获取到数据,则请求云函数获取数据
				setTimeout(() => {
					if (!that.form1._id) {
						vk.callFunction({
							url: that.url.getInfo,
							loading: true,
							data: {
								_id: options._id
							},
							success: (data) => {
								that.form1 = data.info;
							}
						});
					}
				}, 100);
			}
		},
		// 表单提交
		submit() {
			let that = this;
			let { form1 } = that;
			that.$refs.form1.validate(valid => {
				if (valid) {
					let url = that.mode == "update" ? that.url.update : that.url.add;
					vk.callFunction({
						url,
						loading: true,
						data: form1,
						success: function(data) {
							vk.toast(data.msg, 500, function() {
								const eventChannel = that.getOpenerEventChannel(); // that 需指向 this
								if (eventChannel.emit) eventChannel.emit(that.mode, data.info); // 触发A页面的 update 监听事件
								vk.navigateBack();
							});
						}
					});
				}
			});
		},
		// 表单重置
		resetFields() {
			let that = this;
			that.$refs["form1"].resetFields();
			that.form1 = vk.pubfn.copyObject(that.originalForm);
		},
		secondaryBtn() {
			let that = this;
			that.addressPopup.show = true;
			uni.getClipboardData({
				success: function ({ data }) {
					uni.hideToast();
					let res = that.$refs.address.addressDiscern(data);
					if (res.code == 0) {
						that.addressPopup.value = data;
					}
				}
			});
		},
		// 智能识别收货信息
		discernAddress() {
			let that = this;
			let text = that.addressPopup.value;
			let res = that.$refs.address.addressDiscern(text);
			if (res.code == 0) {
				vk.pubfn.objectAssign(that.form1, res.data);
				that.addressPopup.show = false;
			} else {
				vk.toast(res.msg);
			}
			that.$refs.uModal.clearLoading();
		}
	},
	// 计算属性
	computed: {

	}
};
</script>
<style lang="scss" scoped>

.app{
	--main: #19be6b;
	--secondary: rgba(76,128,96,0.2);

	background-color: var(--bgcolor);
	min-height: calc(100vh - var(--window-top));
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		.btn-box {
			display: flex;
			width: 100%;
			height: 100%;
			align-items: center;
			> view {
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.secondary-btn {
				background-color: #ffffff;
			}
			.main-btn {
				background-color: var(--main);
				color: #ffffff;
			}
		}
	}

	::v-deep .u-form-item {
		background-color: #ffffff;
		display: block;
		color: #7e7e7e;
		color: #262626;
		padding: 20rpx;
		margin-bottom: 0rpx;
	}
}
</style>
